<template>
  <div class="station-management">
    <cardBox class="leftMenu" title="公司列表" icon="&#xe6f2;">
      <treeMenu 
        :treeData="allOrgs" 
        name="orgname"  
        @menuLeftClick="handleMenuClick" 
        nodeKey="id" 
        ref="treeMenu" 
        isCompany 
        isRightMenu
      />
    </cardBox>
    <cardBox class="content-main" title="电站列表">
      <template #right>
        <el-tag type="info" class="stat-tag">
            <i class="el-icon-collection"></i>
            当前共有 {{ stationList.length }} 个流域
        </el-tag>
      </template>
      <div class="stations-section">
        <div class="stations-grid">
          <div 
            v-for="station in stationList" 
            :key="station.id"
            class="station-card"
          >
            <div class="card-header">
              <div class="station-title">
                <h3 class="station-name">{{ station.stationName }}</h3>
                <div class="header-badges">
                  <div class="type">{{ station.damCategory }}</div>
                  <span class="scale-badge">{{ station.scale || '未知等级' }}</span>
                </div>
              </div>
            </div>

            <div class="card-content">
              <div class="info-grid">
                <div class="info-item location">
                  <div class="info-icon">
                    <i class="el-icon-location-information"></i>
                  </div>
                  <div class="info-content">
                    <div class="info-label">经度</div>
                    <div class="info-value">{{ station.locationJ }}</div>
                  </div>
                </div>
                <div class="info-item location">
                  <div class="info-icon">
                    <i class="el-icon-location-information"></i>
                  </div>
                  <div class="info-content">
                    <div class="info-label">纬度</div>
                    <div class="info-value">{{ station.locationY }}</div>
                  </div>
                </div>
                
                <div class="info-item capacity">
                  <div class="info-icon">
                    <i class="el-icon-data-line"></i>
                  </div>
                  <div class="info-content">
                    <div class="info-label">装机容量</div>
                    <div class="info-value">{{ station.installation || '--' }}</div>
                  </div>
                </div>
                
                <div class="info-item dam">
                  <div class="info-icon">
                    <i class="el-icon-trophy"></i>
                  </div>
                  <div class="info-content">
                    <div class="info-label">坝高</div>
                    <div class="info-value">{{ station.damHeight || '--' }}</div>
                  </div>
                </div>
                
                <div class="info-item reservoir">
                  <div class="info-icon">
                    <i class="el-icon-watermelon"></i>
                  </div>
                  <div class="info-content">
                    <div class="info-label">库容</div>
                    <div class="info-value">{{ station.reservoirCapacity || '--' }}</div>
                  </div>
                </div>
                
                <div class="info-item operation">
                  <div class="info-icon">
                    <i class="el-icon-time"></i>
                  </div>
                  <div class="info-content">
                    <div class="info-label">投运时间</div>
                    <div class="info-value">{{ station.productionTime || '--' }}</div>
                  </div>
                </div>

                <div class="info-item capacity">
                  <div class="info-icon">
                    <i class="el-icon-office-building"></i>
                  </div>
                  <div class="info-content">
                    <div class="info-label">所属公司</div>
                    <div class="info-value">{{ station.companyName || '--' }}</div>
                  </div>
                </div>

                <div class="info-item capacity">
                  <div class="info-icon">
                    <i class="el-icon-position"></i>
                  </div>
                  <div class="info-content">
                    <div class="info-label">所属流域</div>
                    <div class="info-value">{{ station.basinName || '--' }}</div>
                  </div>
                </div>
              </div>
            </div>

            <div class="card-actions" v-if="showRoleEdit || showRoleDel">
              <el-button 
                type="text" 
                @click="handleEditStation(station)"
                v-if="showRoleEdit"
                class="action-btn edit"
              >
                <i class="el-icon-edit"></i>
                编辑
              </el-button>
              
              <el-button 
                type="text" 
                @click="handleSetVR(station.id)"
                v-if="showRoleEdit"
                class="action-btn vr"
              >
                <i class="el-icon-picture-outline-round"></i>
                VR设置
              </el-button>
              
              <el-button 
                type="text" 
                @click="handleDeleteStation(station.id)"
                v-if="showRoleDel"
                class="action-btn delete"
              >
                <i class="el-icon-delete"></i>
                删除
              </el-button>
            </div>
          </div>
        </div>
      </div>
    </cardBox>


    <el-dialog title="电站管理" :visible.sync="stationDialogVisible" width="800px" :before-close="handleCloseStationDialog" v-dialogDrag>
      <el-form ref="stationForm" :model="stationForm" label-width="100px" :inline="true" size="small">
          <el-form-item label="所属公司">
            <el-cascader
              :options="allOrgs"
              :props="{ checkStrictly: true ,value:'orgid',label:'orgname',children:'children'}"
              clearable style="width:630px" v-model="stationForm.ORGID" @change="handleChangeUserOrgidDialog"></el-cascader>
          </el-form-item>
          <el-form-item label="电站名称">
            <el-input  v-model="stationForm.stationName" placeholder="请输入" style="width:270px"/>
          </el-form-item>
          
          <el-form-item label="所属流域">
            <el-select  v-model="stationForm.basinID" placeholder="请选择流域" style="width:270px">
              <el-option
                v-for="item in basinOptions"
                :key="item.id"
                :label="item.basinName"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="位置经度">
            <el-input-number class="sItemNumber" v-model="stationForm.locationJ" :min="-10000" :max="10000" label="请输入" style="width:270px"></el-input-number>
          </el-form-item>
          
          <el-form-item label="位置纬度">
            <el-input-number class="sItemNumber" v-model="stationForm.locationY" :min="-10000" :max="10000" label="请输入" style="width:270px"></el-input-number>
          </el-form-item>
          <el-form-item label="大坝类型">
            <el-input class="sItem" v-model="stationForm.damCategory" placeholder="请输入" style="width:270px"/>
          </el-form-item>
          
          <el-form-item label="坝长">
            <el-input class="sItem" v-model="stationForm.damLen" placeholder="请输入" style="width:270px"/>
          </el-form-item>

          <el-form-item label="坝高">
            <el-input class="sItem" v-model="stationForm.damHeight" placeholder="请输入" style="width:270px"/>
          </el-form-item>

          <el-form-item label="库容">
            <el-input class="sItem" v-model="stationForm.reservoirCapacity" placeholder="请输入" style="width:270px"/>
          </el-form-item>

          <el-form-item label="装机容量">
            <el-input class="sItem" v-model="stationForm.installation" placeholder="请输入" style="width:270px"/>
          </el-form-item>

          <el-form-item label="工程等级">
            <el-input class="sItem" v-model="stationForm.scale" placeholder="请输入" style="width:270px"/>
          </el-form-item>

          <el-form-item label="投运时间">
            <el-date-picker v-model="stationForm.productionTime"  value-format="yyyy-MM-dd"  type="date" placeholder="选择日期" style="width:270px"></el-date-picker>
          </el-form-item> 

          <el-form-item label="安全评级">
            <el-input class="sItem" v-model="stationForm.safeLevel"  placeholder="请输入" style="width:270px"/>
          </el-form-item>

          <el-form-item label="注册时间">
            <el-date-picker v-model="stationForm.registTime"  value-format="yyyy/MM/dd"  type="date" placeholder="选择日期" style="width:270px">
            </el-date-picker>
          </el-form-item>

          <el-form-item label="下次换证时间">
            <el-date-picker v-model="stationForm.correctionTime"  value-format="yyyy/MM/dd"  type="date" placeholder="选择日期" style="width:270px">
            </el-date-picker>
          </el-form-item>

          <el-form-item label="定检时间">
            <el-date-picker v-model="stationForm.inspectionTime"  value-format="yyyy/MM/dd"  type="date" placeholder="选择日期" style="width:270px">
            </el-date-picker>
          </el-form-item>

          <el-form-item label="下次定检时间">
            <el-date-picker v-model="stationForm.inspectionTime1"  value-format="yyyy/MM/dd"  type="date" placeholder="选择日期" style="width:270px">
            </el-date-picker>
          </el-form-item>
        </el-form>
        <div class="dialog-footer">
          <el-button size="small" @click="handleCloseStationDialog" icon="el-icon-circle-close" class="cancel-btn">取消</el-button>
            <el-button type="primary" size="small" @click="handleSaveStation" icon="el-icon-circle-check" class="confirm-btn">保存配置</el-button>
        </div>
    </el-dialog>

    <el-dialog title="VR图列表" :visible.sync="vrDialogVisible" width="800px"  v-dialogDrag>
      <el-button type="primary" size="small" icon="el-icon-plus" @click="vrEdit('','add')" style="margin-bottom: 10px;float:right">新增</el-button>
        <el-table :data="vrList">
          <el-table-column align="center" label="坝体名称" prop="name"/>
          <el-table-column align="center" label="图片" prop="img_path">
            <template slot-scope="scope">
              <img :src="scope.row.img_path" style="width:100px; height:100px;"/>
            </template>
          </el-table-column>
          <el-table-column align="center" label="VR图" prop="is_vr">
            <template slot-scope="scope">
              <span v-if="scope.row.is_vr == 1">VR图</span>
              <span v-else>非VR图</span>
            </template>
          </el-table-column>
          <el-table-column  align="center" label="操作" width="300">
            <template slot-scope="scope">
              <el-link type="primary" :underline="false"  icon="el-icon-edit" @click="vrEdit(scope.row,'edit')">编辑</el-link>
              <el-link type="danger" :underline="false" icon="el-icon-delete" @click="vrEdit(scope.row,'del')" style="margin-left: 10px;">删除</el-link>
              <el-link type="success" :underline="false" icon="el-icon-edit" @click="editPoint(scope.row)" style="margin-left: 10px;">设置测点</el-link>
            </template>
          </el-table-column>
        </el-table>
    </el-dialog>

    <el-dialog title="设置VR图" :visible.sync="dmDialogVisible" v-dialogDrag
      :before-close="handleEditDomClose" width="500px">
        <el-form ref="dmForm" :model="dmForm" label-width="100px">
          <el-form-item label="坝体名称">
            <el-input style="width:16rem;" v-model="dmForm.name" placeholder="请输入"/>
          </el-form-item>
          <el-form-item v-if="editVR" label="当前电站图片">
            <img :src="dmForm.img_path" @click="viewImg(dmForm)" style="width:300px"/>
          </el-form-item>
          <el-form-item label="上传电站图片">
            <el-upload
              class="uploadExcel"
              ref="upload"
              action=""
              :limit="1"
              :on-success="vrSuccess"
              :on-change="vrChange"
              :before-remove="vrBeforeRemove"
              :on-remove="vrHandleRemove"
              :before-upload="vrBeforeUpload"
              :on-exceed="vrHandleExceed"
              :file-list="vrFileList"
              :auto-upload="false"
              :http-request="vrUploadFile"
              list-type="picture">
              <el-button slot="trigger" size="mini" type="primary">选取图片</el-button>
              <div slot="tip" class="el-upload__tip">只能上传图片文件，建议图片尺寸比例为2:1</div>
            </el-upload>
          </el-form-item>
          <el-form-item label="是否VR">
            <el-switch
              v-model="dmForm.is_vr"
              active-color="#13ce66"
              inactive-color="#f0f0f0"
              :active-value="1"
              :inactive-value="0"
              >
            </el-switch>
          </el-form-item>
          <el-form-item label="顺序">
            <el-input-number size="small" style="width:8rem;" v-model="dmForm.number" :min="0" :max="10000" label="请输入"></el-input-number>
          </el-form-item>
        </el-form>
        <div class="dialog-footer">
          <el-button size="small" @click="dmDialogVisible = false" icon="el-icon-circle-close" class="cancel-btn">取消</el-button>
            <el-button type="primary" size="small" @click="handleEditDm" icon="el-icon-circle-check" class="confirm-btn">保存配置</el-button>
        </div>
    </el-dialog>
  </div>
</template>

<script>
import { GetStationByCompanyID, DelStation, getORGByUser, EditStation,GetAllBasin,GetTblStationImg,DelTblStationImg,GetTblVrInfo,AddTblStationImg,EditTblStationImg } from "@/api/https";
import cardBox from "@/components/base/cardBox.vue";
import treeMenu from '@/components/base/treeMenu.vue'
import { findLeafNodes } from '@/utils/treeUtils';
export default {
  name: 'stationPage',
  components:{cardBox,treeMenu},
  props: {
    showRoleAdd: {
      type: Number,
      default: 0
    },
    showRoleEdit: {
      type: Number,
      default: 0
    },
    showRoleDel: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      stationList: [],
      allOrgs: [], 
      selectedOrg: null,
      selectedOrgId: null,
      stationDialogVisible: false,
      stationForm:{},
      basinOptions:[],
      vrList:[],
      vrDialogVisible:false,
      dmForm:{},
      editVR:false,
      dmDialogVisible:false,
      vrFileList:[],
      station_ID:''
    };
  },
  mounted() {
    this.loadCompanyTree()
    GetAllBasin({
        ORGID:0
      }).then(res=>{
        if (res.isSuccess && res.data) {
          this.basinOptions = res.data || []
        }
      });
  },
  methods: {
    loadCompanyTree() {
      getORGByUser().then(res=>{
        if (res.isSuccess) {
          this.allOrgs = res.data || [];
          if(res.data.length > 0){
            const leafInfo = findLeafNodes(this.allOrgs);
            this.selectedOrgId = leafInfo.node.orgid;
            this.selectedOrg = leafInfo.node.orgname;
            this.nodeId = leafInfo.nodeId;
            this.$nextTick(()=>{
                this.$refs.treeMenu.$refs.tree.setCurrentKey(this.nodeId);
                this.loadStations()
            })
          }
        }
      })
    },
    loadStations() {
      GetStationByCompanyID(this.selectedOrgId).then(res=>{
        if(res.isSuccess && res.data && res.data.length > 0){
          this.stationList = res.data.map(station => {
            let locationJ = 0, locationY = 0;
            if (station.location) {
              const location = station.location.split(',');
              locationJ = Number(location[0]) || 0;
              locationY = Number(location[1]) || 0;
            }
            return {
              ...station,
              locationJ,
              locationY
            };
          });
        }else{
          this.stationList = []
        }
      })
    },


    handleEditStation(station) {
      this.stationForm = { ...station };
      this.stationDialogVisible = true;
    },

    handleDeleteStation(id) {
      this.$confirm('确认删除该电站？此操作不可恢复。', '警告', {
        type: 'warning',
      }).then(() => {
          DelStation({ID:id}).then(res=>{
              if(res.isSuccess){
                  this.loadStations()
              }else{
                  this.$message.error(res.errorMessage)
              }
          })
      }).catch(() => {});
    },

    handleSetVR(id) {
      this.station_ID = id;
      GetTblStationImg(id).then(res=>{
        if (res.isSuccess) {
            this.vrList = res.data;
            this.vrDialogVisible = true;
        }
      });
    },

    handleDialogClose() {
      this.stationDialogVisible = false;
      this.stationForm = null;
    },

    handleSaveStation() {
      this.stationDialogVisible = false;
      this.loadStations();
    },
    handleChangeUserOrgidDialog(val){ 
      if(val && val.length > 0){
        this.stationForm.ORGID = val[val.length - 1]
      }else{
        this.stationForm.ORGID = ''
      }
    },
    handleCloseStationDialog(){
      this.stationForm = {}
      this.stationDialogVisible = false
    },
    handleSaveStation(){
      if(this.stationForm.ORGID == undefined || this.stationForm.ORGID == null || this.stationForm.ORGID == ''){
        this.$message.error('请选择所属公司！')
        return false
      }
      this.stationForm = {
        ...this.stationForm,
        location:this.stationForm.locationJ + ',' + this.stationForm.locationY
      }
      EditStation(this.stationForm).then(res=>{
          if (res.isSuccess) {
            this.handleCloseStationDialog()
            this.loadStations()
          }else{
            this.$message.error(res.errorMessage)
          }
      });
    },
    handleMenuClick(data){
      this.stationList = []
      this.selectedOrgId = data.orgid || ''
      this.loadStations()
    },
    handleEditDomClose(){
      this.dmDialogVisible = false;
      this.vrFileList = []
    },
    vrEdit(rowData,type) {
      if(type == 'add') {
        this.dmForm = {
          ...this.dmForm,
          station_id: this.station_ID,
          id:0,
          name: '',
          img_path: '',
          is_vr: 1,
          number: 0,
          img_data: ''
        }
        this.editVR = false
        this.dmDialogVisible = true;
      } else if (type == 'edit') {
        this.dmForm = {
          ...this.dmForm,
          station_id: rowData.station_id,
          id: rowData.id,
          name: rowData.name,
          img_path: rowData.img_path,
          is_vr: rowData.is_vr,
          number: rowData.number,
          img_data:  rowData.img_data
        }
        this.editVR = true
        this.dmDialogVisible = true;
      } else {
        this.$confirm(`确认删除名为[${rowData.name}]的坝体？`,'提示',{
          type:'warning'
        }).then(() => {
          DelTblStationImg(rowData.id).then(res=>{
          if(res.isSuccess){
            this.$message.success("删除成功");
            this.handleSetVR(rowData.station_id);
          }
        })
        }).catch(() => {});  
      }
    },
    editPoint(rowData) {
      if(rowData) {
        this.vrpForm.id = rowData.id;
        this.editVrpForm.vr_img_id = rowData.id;
      }
      GetTblVrInfo(this.vrpForm.id, this.vrpForm.name).then(res=>{
        if (res.isSuccess) {
          this.vrpList = data.data;
          this.vrPointDialogVisible = true;
        }
      });
    },
    vrSuccess(res){
      console.log(res);
      this.$message.success('操作成功！');
    },
    vrChange(file){
      console.log(file)
      this.dmForm = {
        ...this.dmForm,
        img_path: file.name
      }
      let reader = new FileReader();
      reader.onload = () => {
        let _base64 = reader.result;
        let BASE64 = _base64.split(",");
      this.carPicture = BASE64[1];  //赋值
      };
      reader.readAsDataURL(file.raw);
      reader.onload = () => {
        // 赋值给dmForm里的img_data
        this.dmForm.img_data = reader.result
      }
    },
    vrBeforeUpload(file){
      //新增文件类型的限制
      let types = ['image/jpeg', 'image/jpg', 'image/png'];
      const isImage = types.includes(file.type);
      if (!isImage) {
          this.$message.error('上传图片只能是 JPG、JPEG、PNG 格式!');
          return false;
      }
    },
    vrHandleRemove(file, vrFileList) {
      console.log(file, vrFileList);
      this.bmForm.img_data = '';
    },
    vrHandleExceed() {
      //这个是文件超出个数限制时，给出提示
      this.$notify.warning({
          title: '警告',
          message: '图片只能上传一张'
      })
    },
    vrBeforeRemove(file) {
      return this.$confirm(`确定移除 ${file.name}？`)
    },
    vrUploadFile (param) {
      console.log(param)
    },
    handleEditDm() {
      if (this.editVR) {
         EditTblStationImg(this.dmForm).then(res=>{
        if (res.isSuccess) {
          this.dmDialogVisible = false;
          this.vrFileList = []
          this.handleSetVR(this.dmForm.station_id);
        }else{
          this.$message.error(res.errorMessage)
        }
      });
      } else {
        AddTblStationImg(this.dmForm).then(res=>{
        if (res.isSuccess) {
          this.dmDialogVisible = false;
          this.vrFileList = []
          this.handleSetVR(this.dmForm.station_id);
        }else{
          this.$message.error(res.errorMessage)
        }
      });
       
      }
    },
  }
};
</script>

<style lang="scss" scoped>
.station-management {
  height: calc(100vh - 180px);
  margin-top: 10px;
  display: grid;
  grid-template-columns: 400px 1fr;
  
  .leftMenu{
    width: 400px;
    height: calc(100vh - 180px);
    flex-shrink: 0;
    overflow: auto;
  }
  
  .content-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin-left: 10px;
    
    .stations-section {
      flex: 1;
      padding: 10px 24px 24px;
      overflow-y: auto;
      
      .stations-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
        gap: 20px;
        
        .station-card {
          background: white;
          border-radius: 12px;
          padding: 0;
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
          transition: transform 0.3s, box-shadow 0.3s;
          display: flex;
          flex-direction: column;
          height: 100%;
          overflow: hidden;
          position: relative;
          
          &:hover {
            transform: translateY(-4px);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
          }
          
          // 安全等级颜色条
          &::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
          }
          
          &.level-safe::before {
            background: linear-gradient(90deg, #67c23a, #85ce61);
          }
          
          &.level-warning::before {
            background: linear-gradient(90deg, #e6a23c, #ebb563);
          }
          
          &.level-danger::before {
            background: linear-gradient(90deg, #f56c6c, #f78989);
          }
          
          &.level-unknown::before {
            background: linear-gradient(90deg, #909399, #b1b3b8);
          }
          
          .card-header {
            padding: 20px;
            background: #f9f9f9;
            
            
            .station-title {
              display: flex;
              justify-content: space-between;
              flex-direction:row;
              align-items: center;
              width: 100%;
              
              .station-name {
                margin: 0;
                color: #303133;
                font-size: 16px;
                font-weight: 700;
                flex: 1;
              }
              
              .header-badges {
                .type{
                  text-align: center;
                  line-height: 16px;
                  margin-bottom: 6px;
                  font-size: 12px;
                }
                .safety-tag {
                  font-weight: 600;
                  border: none;
                  border-radius: 6px;
                  padding: 4px 8px;
                }
                
                .scale-badge {
                  background: rgba(64, 158, 255, 0.1);
                  color: #409EFF;
                  padding: 2px 8px;
                  border-radius: 4px;
                  font-size: 12px;
                  font-weight: 500;
                }
              }
            }
            
            .station-meta {
              display: flex;
              gap: 16px;
              
              .meta-item {
                display: flex;
                align-items: center;
                font-size: 13px;
                color: #606266;
                
                i {
                  margin-right: 6px;
                  color: #909399;
                }
              }
            }
          }
          
          .card-content {
            flex: 1;
            padding: 20px;
            
            .info-grid {
              display: grid;
              grid-template-columns: 1fr 1fr;
              gap: 1px;
              
              .info-item {
                display: flex;
                align-items: flex-start;
                padding: 12px;
                border-radius: 8px;
                transition: background-color 0.2s;
                
                &:hover {
                  background-color: #f8f9fa;
                }
                
                .info-icon {
                  width: 36px;
                  height: 36px;
                  border-radius: 8px;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  margin-right: 12px;
                  flex-shrink: 0;
                }
                
                .info-content {
                  .info-label {
                    font-size: 12px;
                    color: #909399;
                    margin-bottom: 4px;
                  }
                  
                  .info-value {
                    font-size: 14px;
                    color: #303133;
                    font-weight: 500;
                  }
                }
                
                // 不同信息项的颜色主题
                &.location .info-icon {
                  background: rgba(64, 158, 255, 0.1);
                  color: #409EFF;
                }
                
                &.capacity .info-icon {
                  background: rgba(103, 194, 58, 0.1);
                  color: #67C23A;
                }
                
                &.dam .info-icon {
                  background: rgba(230, 162, 60, 0.1);
                  color: #E6A23C;
                }
                
                &.reservoir .info-icon {
                  background: rgba(144, 147, 153, 0.1);
                  color: #909399;
                }
                
                &.operation .info-icon {
                  background: rgba(64, 158, 255, 0.1);
                  color: #409EFF;
                }
              }
            }
          }
          
          .card-actions {
            display: flex;
            justify-content: flex-end;
            gap: 12px;
            padding: 16px 20px;
            border-top: 1px solid #f0f0f0;
            background-color: #fafafa;
            
            .action-btn {
              padding: 8px 12px;
              font-size: 13px;
              border-radius: 6px;
              font-weight: 500;
              transition: all 0.2s;
              
              &.edit {
                color: #409EFF;
                background: rgba(64, 158, 255, 0.05);
                
                &:hover {
                  background-color: rgba(64, 158, 255, 0.15);
                }
              }
              
              &.vr {
                color: #E6A23C;
                background: rgba(230, 162, 60, 0.05);
                
                &:hover {
                  background-color: rgba(230, 162, 60, 0.15);
                }
              }
              
              &.delete {
                color: #F56C6C;
                background: rgba(245, 108, 108, 0.05);
                
                &:hover {
                  background-color: rgba(245, 108, 108, 0.15);
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>